<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    
</head>
<body>
    <header class="header">
        <div class="container">
            <a class="blog" href="#">我的个人博客 | 技术博客</a>
            <ul class="menu">
                <li><a href="/">首页</a></li>
                <li><a href="/map.html">地图</a></li>
                <li><a href="/about.html">关于</a></li>
                <li><a href="/comment.html">而言</a></li>
            </ul>
            <div class="search">
                <input type="text" placeholder="输入关键字查找">
                <button>搜索</button>
            </div>
        </div>
    </header>
    <div class="content">
        <div class="content_left">
            <div class="every_day" >
               <div class="day" id="every_day"> 
                <div class="title">每日一句</div>
                <p class="title_content" v-html="getContent"></p>
                <!-- <p class="title_content">———————oifhdsjopf</p> -->
               </div>
            </div>
            <div class="article_list" id="article_list">
                <div class="article" v-for="article in articleList">
                    <div class="article_box">
                        <a :href="article.link" class="article_title">{{article.title}}</a>
                        <p class="article_content">{{ article.content }}</p>
                    </div>
                    <p class="article_footer">发布于{{ article.date }} |  浏览{{ article.views }} | Tags:{{article.tags}}</p>
                </div>
                <div class="page_tool">
                    <ul>
                        <li 
                        v-for="item in pageNumList"
                        @click = "jumTo(item.page)"
                        v-bind:class="{now_page:(item.text == page)}"
                        >{{item.text}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content_right">
            <div class="right_module" id="random_tags">
                <div>随机标签名</div>
                <div class="tag">
                        <a :href="tag.link" v-for="tag in tags" v-bind:style="{color:randomColor(), fontSize:randomSize()}">{{ tag.text }}</a>
                </div>
            </div>
            <div class="right_module" id="new_hot">
                <div>热门文章</div>
                <ul>
                    <li v-for="temp in titleList">
                        <a :href="temp.link">{{temp.title}}</a>
                    </li>
                </ul>
            </div>
            <div class="right_module" id="new_comments">
                <div>最新评论</div>
                <ul>
                    <li v-for="temp in commentList">
                        <div>
                            <span>{{temp.username}}</span>
                            <span>{{temp.date}}</span>
                        </div>
                        <div class="coment">{{temp.content}}</div>
                    </li>
                </ul>
            </div>
            <div class="right_module">
                <div>友情链接</div>
                <span><a href="#">Skymoon</a></span><span><a href="#">Skymoon</a></span>
                <span><a href="#">Skymoon</a></span><span><a href="#">Skymoon</a></span>
                <span><a href="#">Skymoon</a></span><span><a href="#">Skymoon</a></span>
            </div>
        </div>
    </div>
    <footer>
        <ul>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
        </ul>
        <div>Copyright © 2010-2020 <a href="#">Eric个人博客</a> All rights reserved. 由免费开源的WordPress强力驱动. 鲁ICP备14017955号站长统计</div>
    </footer>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/base.js"></script>

</body>
</html>